<script setup>
import { Collection } from "@element-plus/icons-vue";
import { ref,onMounted,watch } from 'vue'
import useUserInfoStore from "@/stores/user"; //引入仓库
import { storeToRefs } from "pinia"; //引入pinia转换
const userInfoStore = useUserInfoStore();
const initialImg = ref('https://vfiles.gtimg.cn/vupload/202005/07_common_avatar.png')
const { username, img } = storeToRefs(userInfoStore); 
onMounted(() => {
    if(username.value!=null && username.value!=''){
        initialImg.value = img.value
    }
})
watch(() => username.value, ( oldValue) => {
    if(username.value!=null && username.value!=''){
        initialImg.value = img.value
    }
    else{
        initialImg.value = 'https://vfiles.gtimg.cn/vupload/202005/07_common_avatar.png'
    }
})
</script>

<template>
    <header>
        <div class="wrapper">
            <el-popover
            :width="300"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
            <template #reference>
                <el-avatar class="user" src="https://codelover.club/files/stutasks/userID_791/currNo_43/FvakHS-CuyV7r3_nCUTx8kClN-Sh/assets/4ac8c27cc785ab98fafe8f9e0ee04e3-DOp98-hS.jpg" style="width:35px;height: 35px;margin-top: 7.5px;"/>
            </template>
            <template #default>
                <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
                >
                    <el-avatar
                        :size="60"
                        src="https://codelover.club/files/stutasks/userID_791/currNo_43/FvakHS-CuyV7r3_nCUTx8kClN-Sh/assets/4ac8c27cc785ab98fafe8f9e0ee04e3-DOp98-hS.jpg"
                        style="margin-left: 10px;"
                    />
                    <div style="position: fixed;top: 16vh;right: 50px">
                        <el-text class="mx-1" style="margin-right: 20px;">33333333</el-text>
                        <RouterLink to='/classDetailsView' style="color: black;">个人中心</RouterLink>
                    </div>
                    
                    <div>
                        <RouterLink to='/classDetailsView' style="color: black;margin-left: 20px;">我的课程</RouterLink>
                        <RouterLink to='/classDetailsView' style="color: black;float: right;margin-right: 20px;">学习广场</RouterLink><br/><br/>
                        <el-icon><Collection /></el-icon><RouterLink to='/classDetailsView' style="color: black;margin-left: 5px;">管理中心</RouterLink>
                    </div>
                </div>
            </template>
            </el-popover>
            <nav>
                <RouterLink to="/">首页</RouterLink>
                <RouterLink to='/classDetailsView'>前端框架应用项目开发</RouterLink>
                <RouterLink to="/classDetailsView">个人成绩</RouterLink>
            </nav>
        </div>
    </header>
  <RouterView />
</template>

<style scoped>
.user{
    position: fixed;
    top: 10px;
    right: 5px;
}
.user el-avatar{
    border-radius: 50%;
}
.wrapper{
    width: 100%;
    height: 11vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color:white;
    box-shadow: 0px 5px 5px rgb(209, 209, 209);
}
nav {
    position: fixed;
    top:0;
    left: 40px;
    right: 40px;
    height: 8.5vh;
    border-bottom: 1px solid rgb(224, 224, 224);
    line-height: 11.5vh;
    font-size: 12px;
}

nav a.router-link-exact-active {
    color: white;
    background-color: #42b983;
    border: none;
}


nav a {
    padding:  5px 8px;
    margin: 0 3px;
    color: black;
    text-decoration: none;
    border: 1px solid rgb(215, 215, 215);
    box-sizing: border-box;
}

</style>

